<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-switch v-model="value" active-text="亮" inactive-text="暗" inline-prompt />
      </el-header>
      <el-main>
        <el-card style="max-width: 600px">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="FormRules"
            label-width="auto"
            style="max-width: 600px"
          >
            <el-form-item prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名">
                <template #prefix>
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384m0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512m320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0"
                      fill="currentColor"
                    ></path>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请输入密码"
                show-password
                type="password"
              >
                <template #prefix>
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96"
                      fill="currentColor"
                    ></path>
                    <path
                      d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32m192-160v-64a192 192 0 1 0-384 0v64zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64"
                      fill="currentColor"
                    ></path>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="yzm">
              <el-input v-model="formData.yzm" placeholder="请输入验证码">
                <template #prefix>
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96"
                      fill="currentColor"
                    ></path>
                    <path
                      d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32m192-160v-64a192 192 0 1 0-384 0v64zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64"
                      fill="currentColor"
                    ></path>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { login } from '@/service/study5/demo2'
import { useRouter } from 'vue-router'

const value = ref(true)
const router = useRouter()
const formData = reactive({
  username: '',
  password: '',
  yzm: ''
})

const loginData = {
  username: '',
  password: ''
}
const FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  yzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

const formRef = ref(null)

const onSubmit = async () => {
  loginData.username = formData.username
  loginData.password = formData.password
  const res = await login(loginData)

  localStorage.setItem('token', res.data)
  console.log(res.data)
  router.replace('/elementUIdemo1/user')
}
</script>

<style lang="scss" scoped>
/* 你的样式 */
</style>
